<template>
  <section class="content" id="content">
    <!-- 检索条件 -->
    <el-form id="search" :inline="true">
      <el-form-item label="车辆号码：">
        <el-input v-model="searchForm.vehicleNum" clearable placeholder="请输入车辆号码"></el-input>
      </el-form-item>
      <el-form-item label="车辆类型：">
        <el-select v-model="searchForm.vehicleType" clearable placeholder="请选择车辆类型">
          <el-option v-for="item in commonConst.vehicleTypeList" :key="item.key" :label="item.value" :value="item.value"
            placeholder="请选择车辆类型" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属单位：">
        <el-input v-model="searchForm.workUnit" clearable placeholder="请输入所属单位"></el-input>
      </el-form-item>
    </el-form>
    <!-- 功能按钮 -->
    <div class="handler" id="tools">
      <el-button type="primary" @click="searchVehicle">查询</el-button>
      <el-button type="success" @click="handleAdd">新增</el-button>
      <el-button type="danger" @click="handleRemove">删除</el-button>
<!--      <uploadFile @uploadFile="getUploadFileResult" :api="resources.default.uploadFile" />-->
      <el-button type="warning" size="small" @click="onExport">导出</el-button>
    </div>
    <!-- 数据列表 -->
    <div id="table">
      <el-table size="default" :data="tableData" v-loading="loading" :border="true"
        :header-cell-style="{ background: '#e1eaf6 ', color: '#333333' }" :stripe="true"
        @selection-change="selectionChange" highlight-current-row>
        <el-table-column prop="id" type="selection" width="60" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="车辆号码" show-overflow-tooltip min-width="150">
          <template #default="scope">
            <el-link @click="handleInfo(scope.row.id)" type="primary">{{ scope.row.vehicleNum }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="vehicleType" label="车辆类型" show-overflow-tooltip min-width="150"></el-table-column>
        <el-table-column prop="workUnit" label="所属单位" show-overflow-tooltip min-width="150"></el-table-column>
        <el-table-column prop="contactPersonName" label="负责人" show-overflow-tooltip min-width="150"></el-table-column>
        <el-table-column prop="contactPersonTel" label="负责人联系电话" show-overflow-tooltip min-width="150"></el-table-column>
        <el-table-column prop="districtArea" label="行政区域" show-overflow-tooltip min-width="150"></el-table-column>
        <el-table-column prop="unitAddress" label="单位地址" show-overflow-tooltip min-width="150"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip min-width="160"></el-table-column>
        <el-table-column fixed="right" label="操作" show-overflow-tooltip width="80">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row.id)" type="primary">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="pagination">
      <el-pagination :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" :pageNum="pageNum" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
    </div>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" @close="handleClose" id="dialog" width="800">
      <info :send="send" @clean="handleClose"></info>
    </el-dialog>
  </section>
</template>
<script setup lang="ts">
/**
 * 方法、变量及组件的引入
 */
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { store } from "@ice/stark-data";
import commonConst from "@/config/const";
import Info from "./Info.vue";
import uploadFile from "@/components/upload/File";
/**
 * 全局方法引入
 */
const global = getCurrentInstance().appContext.config.globalProperties;
// 检索form字段声明
const searchForm = reactive({
  vehicleNum: "",
  vehicleType: "",
  workUnit: "",
});

// table 相关字段
const tableData = ref([]);
const loading = ref(false);
// 分页相关字段
const pageNum = ref(1);
const total = ref(0);
const pageSize = ref(10);

onMounted(() => {
  // searchVehicle();
})

// 查询功能
const searchVehicle = () => {
  loading.value = true;
  let data = Object.assign({}, searchForm, { pageNum: pageNum.value, pageSize: pageSize.value });
  let obj = global.$delUndefined(data);
  global.$api.getVehicleListPage(obj).then(({ data }) => {
    loading.value = false;
    if (data.status === 'OK') {
      tableData.value = data.data.list;
      total.value = data.data.total;
    }
  });
};
// 分页
const handleCurrentChange = val => {
  pageNum.value = val;
  // 调用查询方法
  searchVehicle();
};
const handleSizeChange = val => {
  pageSize.value = val;
  searchVehicle();
};

// 多选操作 Id集合
const idList = ref([]);
const selectionChange = selection => {
  idList.value = selection.map((item) => item.id);
}
// 删除功能
const handleRemove = () => {
  if (idList.value.length === 0) {
    ElMessage({
      type: "info",
      message: "请选择至少一个车辆信息",
    });
  } else {
    ElMessageBox.confirm(`是否删除${idList.value.length}个车辆的详细信息？删除后不可恢复!`, "确认信息", {
      type: "warning",
      distinguishCancelAndClose: true,
      confirmButtonText: "删除",
      cancelButtonText: "取消",
    })
      .then(() => {
        global.$api
          .delVehicle({
            ids: idList.value,
          }).then(({ data }) => {
            searchVehicle();
            ElMessage({
              type: "success",
              message: "您已经删除了车辆信息",
            });
          });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "您已经取消了删除操作",
        });
      });
  }
};

// 新增/编辑/详情 相关字段
const dialogTitle = ref("");
const dialogVisible = ref(false);
// status 值为add/edit/info,用来标识子组件的状态
const send = reactive({
  info: {},
  status: ""
})
// 打开新增画面
const handleAdd = () => {
  dialogVisible.value = true;
  dialogTitle.value = "车辆信息新增";
  send.status = 'add';
  send.info = {};
};

// 打开编辑画面
const handleEdit = id => {
  dialogVisible.value = true;
  dialogTitle.value = "车辆信息变更";
  send.status = 'edit';
  global.$api.getVehicle({ id }).then(({ data }) => {
    if (data.status === 'OK') {
      send.info = data.data;
    }
  })
};

// 打开详情画面
const handleInfo = id => {
  dialogVisible.value = true;
  dialogTitle.value = "信息详细";
  send.status = 'info';
  global.$api.getVehicle({ id }).then(({ data }) => {
    if (data.status === 'OK') {
      send.info = data.data;
    }
  })
};
// dialog 关闭
const handleClose = () => {
  dialogVisible.value = false;
  send.info = {};
  send.status = "";
  searchVehicle();
}
// 导入
const getUploadFileResult = (val) => {
  if (val) {
    ElMessage.success("文件导入成功!");

    // table 列表刷新

  } else {
    ElMessage.error("文件导入失败!");
  }
};
// 导出
const onExport = () => {
  let tHeader = [
    { key: "name", name: "姓名" },
    { key: "sex", name: "性别" },
    { key: "age", name: "年龄" }
  ];
  // 测试数据
  let tableList = [{ name: "aaa", sex: '1', age: 16 }, { name: "bbb", sex: '2', age: 18 }]
  let exportData = tableList;
  // 将后台状态码转变为文字显示
  for (let i in exportData) {
    if (exportData[i].sex === "1") {
      exportData[i].sex = "男"
    } else if (exportData[i].sex === "2") {
      exportData[i].sex = "女"
    } else {
      exportData[i].sex = "--"
    }
  }
  let list = {
    fileName: "xxx列表", //文件名
    tHeader: tHeader, //生成Excel表格的头部标题栏
    excelData: exportData, //需要导出Excel的数据集合
  };
  global.$exportExcel.exportExcel(list);

};
</script>